﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5ykKBm9eB2hstTJwjqYAbhRzJlgbhhCrdN1l84Y2xPlzBgof0hQge8wL-CCZJoQ2ehwdnsIsglHFPg" type="text/javascript"></script>
    <script type="text/javascript" src="../js/mapstraction.js"></script>
    <script type="text/javascript" src="../js/gmap-wms.js"></script>
    <script type="text/javascript" src="../js/prototype.js"></script>
    <!--[if IE]>
        <script type="text/javascript" src="../js/excanvas.js"></script>
        <script type="text/javascript" src="../js/base64.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/canvastext.js"></script>
    <script type="text/javascript" src="../js/flotr-0.2.0-alpha.js"></script>
    <script type="text/javascript" src="../js/ObjTree.js"></script>
    <script type="text/javascript" src="../js/tools4gps.js"></script>
</head>
<body>
<div id="map" style="width: 580px; height: 350px"></div>
<div id="profile" style="width:422px; height:160px; float:left"></div>
<div id="info">
  Please click on any 
  <img src="img/camera.png" style="vertical-align:middle;width:24,height:24" alt="camera"> icon on the map.
</div>
<script type="text/javascript">
    var map = new Mapstraction('map','openstreetmap');
    map.addControls({
        pan: true,         zoom: 'small',
        scale: true,    map_type: true
    });
    map.addMapTypeControls();
    var parser = new GPS.Parser("gpsdata/070121_itobal-lascuevas.gpx");
    parser.run(function (gpsData) {
        var chart = new GPS.Profile("profile", gpsData);
        var gpsmap = new GPS.Map(map, gpsData, {
            trk: {            // False hide tracks, else...
                width: 4,         // Line width in pixels.
                color: '#0044ff', // Color in the form #RRGGBB
                opacity: 0.7      // Opacity between 0.0 and 1.0
            },
            rte: false,       // False hide routes, else similar to tracks.
            wpt: {            // False hide waypoints, else...
                icon: 'img/camera.png', // Url of the image to be used as icon.
                iconSize: [24,24],   // Array size in pixels of the icon image.
                iconAnchor: [12,12],  // Array offset of the anchor point.
                iconShadow: 'img/camera-s.png', // Url of the image to be used as shadow of the icon.
                iconShadowSize: [44,24] // Array size in pixels of the shadow image.
            },
            join: false,      // If true, join all the segments, tracks or routes
            info: "info",     // set how is showed the waypoints info. None 
                              // if false, in a bubble popup if true or in a 
                              // DOM element identified by it id if string.
            'chart': chart,   // A Profile object to link with (a marker in the map.
                              // Follows mouse movement in the profile) or false.
            marker: {         // Set the options of the marker linked to a chart.
                icon: 'img/greenarrow.png', // See the wpt section.
                iconSize: [24,24],
                iconAnchor: [24,0],
                iconShadow: 'img/greenarrow-s.png',
                iconShadowSize: [37,24]
            },
            followMarker: false // If true, the maps pans to the point 
                                // corresponding the mouse movement in the profile. 
        });
    });
</script>
</body>
</html>
